<template>
    <view class="rank">
        <view class="title">{{month}}月排行榜TOP10</view>
        <view class="table">
            <view>排行</view>
            <view>账号</view>
        </view>
        <view class="rank_box">
            <view v-if="rank_list.length>0">
                <view  class="rank_list1" v-for="(item,index) in rank_list" :key="index">
                    <view>
                        <image  class="logo" :src="item.logo" />
                        <view class="rank_num">{{index+1}}</view>
                    </view>
                    <view>{{item.mobile}}</view>
                </view>
            </view>
            <view v-else>
                <mNodata></mNodata>
            </view>
        </view>
        <view class="tips">当前排行只展示前10用户,最终排名以实际公布为准!</view>
    </view>
</template>

<script>
    import MnoData from '@/components/m-noData.vue'
    export default {
        name: "chuBeiRank",
        data() {
            return {
                rank_list:[],
                month:''
            }
        },
        onShow(){
            this.getChuBeiRankList()
        },
        methods: {
           async getChuBeiRankList(){
               let resData=await this.$apis.getChuBeiRankList()
               console.log(resData)
               if(resData.code===0){
                 this.rank_list.push(...resData.data.list)
                 this.month=resData.data.month
               }
            }

        },
        components:{
            MnoData,
        }

    }
</script>
<style>
    page {
        background-image: url("https://qiniu.scxhrd.com/static/img/bak_chubei.png");
        background-size: 100% 100%;
    }
</style>
<style scoped lang="less">
    .tips {
        position: absolute;
        z-index: 999;
        width: 100%;
        margin-bottom: 20rpx;
        font-size: 20 rpx !important;
        color: red;
        text-align: center;
    }
        .title{
        text-align: center;
        color: #ffffff;
        font-size: 70rpx;
        font-family: DFPZongYiW7;
        margin-top: 20rpx;
    }
    .table{
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 90%;
        margin-left: 5%;
        background-image: linear-gradient(#FE9E38,#FE4E10);
        border-radius: 5px;
        color: #ffffff;
    }
    .rank_box{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 50rpx;
    }

    .rank_list{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 10rpx;
        background-color: #F5F5F5;
        border-radius: 5px;
        padding-top: 10rpx;
        color: #797979;
    }
    .rank_list1{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #FFECDA;
        border-radius: 5px;
        margin-top: 10rpx;
        padding-top: 10rpx;
        color: #FF7814;
    }
    .rank_list2{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #FFF4E9;
        border-radius: 5px;
        margin-top: 10rpx;
        padding-top: 10rpx;
        color: #FF860A;
    }
    .rank_list3{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #FEF9F3;
        border-radius: 5px;
        margin-top: 10rpx;
        padding-top: 10rpx;
        color: #FF860A;
    }
    .logo{
        width: 80rpx;
        height:80rpx;
        border-radius: 30px;
    }
    .rank_num{
        background-color: red;
        width: 30rpx;
        height: 30rpx;
        border-radius: 10px;
        font-size: 25rpx;
        color: #ffffff;
        text-align: center;
        transform: translate(180%,-80%);
    }
</style>
